<!DOCTYPE html>
<html lang="en">
  <head>
    <meta
      http-equiv="content-type"
      content="text/html; charset=utf-8"
      lang="en"
    />
    <meta name="viewport" content="width=device-width" />
    <title>overpass turbo</title>
    <!-- https://developers.facebook.com/docs/sharing/webmasters -->
    <meta property="og:title" content="overpass turbo" />
    <meta
      property="og:description"
      content="A web based data mining tool for OpenStreetMap which runs any kind of Overpass API query and shows the results on an interactive map."
    />
  </head>
  <body>
    <!-- Layout -->
    <nav class="navbar is-light" role="navigation" aria-label="main navigation">
      <div class="navbar-start">
        <div class="navbar-item">
          <div class="buttons has-addons">
            <button
              class="t button is-success"
              accesskey="1"
              data-ide-handler="click:onRunClick"
              title=""
              data-t="[title]nav.run_tt"
            >
              <span class="icon">
                <span class="fas fa-play"></span>
              </span>
              <span class="t" data-t="nav.run">Run</span>
            </button>
            <button
              id="rerender-button"
              class="t button"
              data-ide-handler="click:onRerenderClick"
              title=""
              data-t="[title]nav.rerender_tt"
              style="display: none"
            >
              <span class="icon">
                <span class="fas fa-sync-alt"></span>
              </span>
            </button>
            <button
              class="t button"
              accesskey="2"
              data-ide-handler="click:onShareClick"
              title=""
              data-t="[title]nav.share_tt"
            >
              <span class="icon">
                <span class="fas fa-share-alt"></span>
              </span>
              <span class="t" data-t="nav.share">Share</span>
            </button>
            <button
              class="t button"
              accesskey="3"
              data-ide-handler="click:onExportClick"
              title=""
              data-t="[title]nav.export_tt"
            >
              <span class="icon">
                <span class="fas fa-external-link-alt"></span>
              </span>
              <span class="t" data-t="nav.export">Export</span>
            </button>
          </div>
        </div>
        <div class="navbar-item">
          <div class="buttons has-addons">
            <button
              class="t button"
              accesskey="4"
              data-ide-handler="click:onFfsClick"
              title=""
              data-t="[title]nav.wizard_tt"
            >
              <span class="icon">
                <span class="fas fa-magic"></span>
              </span>
              <span class="t" data-t="nav.wizard">Wizard</span>
            </button>
          </div>
        </div>
        <div class="navbar-item">
          <div class="buttons has-addons">
            <button
              class="t button"
              accesskey="5"
              data-ide-handler="click:onSaveClick"
              title=""
              data-t="[title]nav.save_tt"
            >
              <span class="icon">
                <span class="fas fa-save"></span>
              </span>
              <span class="t" data-t="nav.save">Save</span>
            </button>
            <button
              class="t button"
              accesskey="6"
              data-ide-handler="click:onLoadClick"
              title=""
              data-t="[title]nav.load_tt"
            >
              <span class="icon">
                <span class="fas fa-folder-open"></span>
              </span>
              <span class="t" data-t="nav.load">Load</span>
            </button>
            <button
              class="t button"
              accesskey=""
              id="logout"
              data-ide-handler="click:onLogoutClick"
              title=""
              data-t="[title]nav.logout_tt"
            >
              <span class="icon">
                <span class="fas fa-sign-out-alt"></span>
              </span>
              <span class="t" data-t="nav.logout">Log out</span>
            </button>
          </div>
        </div>
        <div class="navbar-item">
          <div class="buttons has-addons">
            <button
              class="t button"
              accesskey="9"
              data-ide-handler="click:onSettingsClick"
              title=""
              data-t="[title]nav.settings_tt"
            >
              <span class="icon">
                <span class="fas fa-cog"></span>
              </span>
              <span class="t" data-t="nav.settings">Settings</span>
            </button>
            <button
              class="t button"
              accesskey="0"
              data-ide-handler="click:onHelpClick"
              title=""
              data-t="[title]nav.help_tt"
            >
              <span class="icon">
                <span class="fas fa-question"></span>
              </span>
              <span class="t" data-t="nav.help">Help</span>
            </button>
          </div>
        </div>

        <div class="navbar-brand">
          <a class="navbar-item" href="index.html">
            overpass turbo
            <img src="turbo.png" alt="overpass turbo" />
          </a>
        </div>
      </div>

      <div class="navbar-end">
        <div class="navbar-item">
          <div class="tabs is-toggle">
            <ul>
              <li class="is-active Map">
                <a class="t" title="" data-t="[title]tabs.map_tt;tabs.map">
                  Map
                </a>
              </li>
              <li class="Data">
                <a class="t" title="" data-t="[title]tabs.data_tt;tabs.data">
                  Data
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>

    <div id="editor">
      <!-- CodeMirror goes here -->
      <textarea></textarea>
    </div>
    <div id="dataviewer">
      <div id="map"></div>
      <div id="data"></div>
    </div>

    <!-- Wait spinner -->
    <div class="modal is-active" id="loading-dialog">
      <div class="modal-background"></div>
      <div class="modal-content">
        <div class="box">
          <progress class="progress is-small is-dark" max="100"></progress>
          <div class="wait-info">
            <h4>overpass turbo loading...</h4>
            <ul class="plain"></ul>
          </div>
        </div>
      </div>
    </div>

    <!-- Dialogs -->
    <!-- Help -->
    <div class="modal dialog" id="help-dialog">
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">
            <span class="icon">
              <span class="fas fa-question"></span>
            </span>
            <span class="t" data-t="[html]help.title"></span>
          </p>
          <button
            class="delete"
            aria-label="close"
            data-ide-handler="click:onHelpClose"
          ></button>
        </header>
        <section class="modal-card-body">
          <div class="content">
            <h3 class="t" data-t="help.section.introduction"></h3>
            <div class="content">
              <p class="t" data-t="[html]help.intro.0"></p>
              <p>
                <span class="t" data-t="[html]help.intro.1"></span>
                <span class="t" data-t="[html]help.intro.1b"></span>
              </p>
              <p class="t" data-t="[html]help.intro.2"></p>
            </div>
            <h3 class="t" data-t="help.section.queries"></h3>
            <div>
              <p class="t" data-t="[html]help.queries.expl"></p>
              <p class="t" data-t="help.intro.shortcuts"></p>
              <ul>
                <li>
                  <code>{{bbox}}</code> &mdash;
                  <span class="t" data-t="help.intro.shortcuts.bbox"></span>
                </li>
                <li>
                  <code>{{center}}</code> &mdash;
                  <span class="t" data-t="help.intro.shortcuts.center"></span>
                </li>
                <li>
                  <code>{{date:…}}</code> &mdash;
                  <span class="t" data-t="help.intro.shortcuts.date"></span>
                </li>
                <li>
                  <code>{{style:…}}</code> &mdash;
                  <span
                    class="t"
                    data-t="[html]help.intro.shortcuts.style"
                  ></span>
                </li>
                <li class="t" data-t="[html]help.intro.shortcuts.custom"></li>
              </ul>
              <p class="t" data-t="[html]help.intro.shortcuts.more"></p>
            </div>
            <h3 class="t" data-t="help.section.ide"></h3>
            <div>
              <h4 class="t" data-t="help.ide.share.title"></h4>
              <p class="t" data-t="[html]help.ide.share.expl"></p>
              <h4 class="t" data-t="help.ide.save_load.title"></h4>
              <p class="t" data-t="[html]help.ide.save_load.expl"></p>
              <h4 class="t" data-t="help.ide.keyboard.title"></h4>
              <ul>
                <li>
                  <kbd>Ctrl</kbd>+<kbd>Enter</kbd> &mdash;
                  <span class="t" data-t="help.ide.keyboard.run"></span>
                </li>
                <li>
                  <kbd>Ctrl</kbd>+<kbd>I</kbd> &mdash;
                  <span class="t" data-t="help.ide.keyboard.wizard"></span>
                </li>
                <li>
                  <kbd>Ctrl</kbd>+<kbd>O</kbd> / <kbd>Ctrl</kbd>+<kbd>S</kbd>
                  &mdash;
                  <span class="t" data-t="help.ide.keyboard.load_save"></span>
                </li>
                <li>
                  <kbd>Ctrl</kbd>+<kbd>H</kbd> &mdash;
                  <span class="t" data-t="help.ide.keyboard.help"></span>
                </li>
              </ul>
            </div>
            <h3 class="t" data-t="help.section.key"></h3>
            <div>
              <img
                src="map-key.png"
                alt=""
                class="t"
                data-t="[alt]help.key.example"
              />
              <p class="t" data-t="help.key.description"></p>
            </div>
            <h3 class="t" data-t="help.section.export"></h3>
            <div>
              <p class="t" data-t="[html]help.export"></p>
              <h4 class="t" data-t="help.export.map.title"></h4>
              <p class="t" data-t="help.export.map.expl"></p>
              <h4 class="t" data-t="help.export.query_data.title"></h4>
              <p class="t" data-t="help.export.query_data.expl"></p>
            </div>
            <h3 class="t" data-t="help.section.about"></h3>
            <div>
              <a href="http://overpass-api.de">
                <img
                  style="float: right"
                  src="//wiki.openstreetmap.org/w/images/b/b3/Powered_by_Overpass_API.png"
                  alt="powered by Overpass API"
              /></a>
              <p class="t" data-t="[html]help.about.maintained"></p>
              <h4 class="t" data-t="help.about.feedback.title"></h4>
              <p class="t" data-t="[html]help.about.feedback"></p>
              <h4 class="t" data-t="help.about.source.title"></h4>
              <p class="t" data-t="[html]help.about.source"></p>
              <p id="overpass-turbo-version"></p>
            </div>
            <h3 class="t" data-t="help.section.attribution"></h3>
            <div>
              <h4 class="t" data-t="help.attr.data_sources"></h4>
              <ul class="plain">
                <li class="t" data-t="[html]help.attr.data"></li>
                <li>
                  <span class="t" data-t="help.attr.mining"></span>
                  <a href="http://overpass-api.de/">Overpass API</a>
                </li>
                <li class="t" data-t="[html]help.attr.tiles"></li>
                <li>
                  <span class="t" data-t="help.attr.search"></span>
                  <a href="http://wiki.openstreetmap.org/wiki/Nominatim"
                    >Nominatim</a
                  >
                </li>
              </ul>
              <h4 class="t" data-t="help.attr.software"></h4>
              <ul class="plain">
                <li>
                  <span class="t" data-t="help.attr.leaflet"></span>
                  <a href="http://leaflet.cloudmade.com">Leaflet</a>
                </li>
                <li>
                  <span class="t" data-t="help.attr.codemirror"></span>
                  <a href="http://codemirror.net/">CodeMirror</a>
                </li>
                <li>
                  <span class="t" data-t="help.attr.other_libs"></span>
                  <a href="https://github.com/tyrasd/osmtogeojson"
                    >osmtogeojson</a
                  >, <a href="https://github.com/tyrasd/togpx">togpx</a>,
                  <a href="https://github.com/mapbox/tokml">tokml</a>,
                  <a href="http://lodash.com">lodash</a>,
                  <a href="http://jquery.com/">jQuery</a>,
                  <a href="http://jqueryui.com/">jQuery UI</a>,
                  <a href="http://html2canvas.hertzen.com/">html2canvas</a>,
                  <a href="http://code.google.com/p/canvg/">canvg</a>,
                  <a href="https://github.com/kajic/leaflet-locationfilter">
                    leaflet-locationfilter
                  </a>
                  ,
                  <a href="https://github.com/bbecquet/Leaflet.PolylineOffset">
                    leaflet.PolylineOffset
                  </a>
                  , <a href="http://mapbox.com/maki/">maki</a>,
                  <a href="http://www.sjjb.co.uk/mapicons/">SJJB map icons</a>,
                  <a href="https://github.com/nebulon42/osmic/">Osmic</a>,
                  <a href="https://github.com/eligrey/FileSaver.js"
                    >FileSaver.js</a
                  >,
                  <a href="https://github.com/MapBBCode/mapbbcode">MapBBCode</a
                  >,
                  <a href="https://github.com/mapbox/polylabel">polylabel</a>,
                  <a href="https://github.com/osmlab/osm-auth">osm-auth</a>
                </li>
              </ul>
            </div>
          </div>
        </section>
        <footer class="modal-card-foot">
          <div class="level">
            <div class="level-right">
              <div class="level-item">
                <button class="button" data-ide-handler="click:onHelpClose">
                  <span class="t" data-t="dialog.close">Close</span>
                </button>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>

    <!-- Settings -->
    <div class="modal dialog" id="settings-dialog">
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">
            <span class="icon">
              <span class="fas fa-cog"></span>
            </span>
            <span class="t" data-t="[html]settings.title"></span>
          </p>
          <button
            class="delete"
            aria-label="close"
            data-ide-handler="click:onSettingsClose"
          ></button>
        </header>
        <section class="modal-card-body">
          <div class="box">
            <h3 class="subtitle t" data-t="settings.section.general"></h3>
            <div class="field">
              <label class="label" for="ui_language">
                <span class="t" data-t="settings.ui_lang"></span>
              </label>
              <div class="control">
                <input
                  class="input"
                  type="text"
                  name="ui_language"
                  value=""
                  id="ui_language"
                />
              </div>
            </div>
            <div class="field">
              <label class="label" for="server">
                <span class="t" data-t="settings.server"></span>
              </label>
              <div class="control">
                <input
                  class="input"
                  type="text"
                  name="server"
                  value=""
                  id="server"
                />
              </div>
            </div>
            <div class="field">
              <div class="control">
                <label class="checkbox">
                  <input type="checkbox" name="no_autorepair" />
                  <span class="t" data-t="settings.disable_autorepair"></span>
                </label>
              </div>
            </div>
          </div>
          <div class="box">
            <h3 class="subtitle t" data-t="settings.section.editor"></h3>
            <div class="field">
              <div class="control">
                <label class="checkbox">
                  <input type="checkbox" name="use_rich_editor" />
                  <span class="t" data-t="settings.enable_rich_editor"></span>
                </label>
              </div>
              <p class="help t" data-t="settings.enable_rich_editor_expl"></p>
            </div>
            <div class="field">
              <label class="label" for="editor_width">
                <span class="t" data-t="settings.editor_width"></span>
              </label>
              <div class="control">
                <input
                  type="text"
                  class="input"
                  name="editor_width"
                  value=""
                  id="editor_width"
                />
              </div>
              <p class="help t" data-t="settings.editor_width_expl"></p>
            </div>
          </div>
          <div class="box">
            <h3 class="subtitle t" data-t="settings.section.map"></h3>
            <div class="field">
              <label class="label" for="tile_server">
                <span class="t" data-t="settings.tile_server"></span>
              </label>
              <div class="control">
                <input
                  class="input"
                  type="text"
                  name="tile_server"
                  value=""
                  id="tile_server"
                />
              </div>
            </div>
            <div class="field">
              <label class="label" for="background_opacity">
                <span class="t" data-t="settings.tile_opacity"></span>
              </label>
              <div class="control">
                <input
                  class="input"
                  type="number"
                  name="background_opacity"
                  value=""
                  id="background_opacity"
                  min="0.0"
                  max="1.0"
                  step="0.1"
                />
              </div>
              <p class="help t" data-t="settings.tile_opacity_expl"></p>
            </div>
            <div class="field">
              <div class="control">
                <label class="checkbox">
                  <input type="checkbox" name="enable_crosshairs" />
                  <span class="t" data-t="settings.show_crosshairs"></span>
                </label>
              </div>
            </div>
            <div class="field">
              <div class="control">
                <label class="checkbox">
                  <input type="checkbox" name="disable_poiomatic" />
                  <span class="t" data-t="settings.disable_poiomatic"></span>
                </label>
              </div>
            </div>
            <div class="field">
              <div class="control">
                <label class="checkbox">
                  <input type="checkbox" name="show_data_stats" />
                  <span class="t" data-t="settings.show_data_stats"></span>
                </label>
              </div>
            </div>
          </div>
          <div class="box">
            <h3 class="subtitle t" data-t="settings.section.sharing"></h3>
            <div class="field">
              <div class="control">
                <label class="checkbox">
                  <input type="checkbox" name="share_include_pos" />
                  <span class="t" data-t="settings.include_map_state"></span>
                </label>
              </div>
            </div>
            <div class="field">
              <label class="label" for="share_compression">
                <span class="t" data-t="settings.compression"></span>
              </label>
              <div class="control">
                <input
                  class="input"
                  type="text"
                  name="share_compression"
                  id="share_compression"
                  value=""
                />
              </div>
            </div>
          </div>
          <div class="box">
            <h3 class="subtitle t" data-t="settings.section.export"></h3>
            <div class="field">
              <div class="control">
                <label class="checkbox">
                  <input type="checkbox" name="export_image_scale" />
                  <span class="t" data-t="settings.export_image_scale"></span>
                </label>
              </div>
            </div>
            <div class="field">
              <div class="control">
                <label class="checkbox">
                  <input type="checkbox" name="export_image_attribution" />
                  <span class="t" data-t="settings.export_image_attr"></span>
                </label>
              </div>
            </div>
          </div>
        </section>
        <footer class="modal-card-foot">
          <div class="level">
            <div class="level-right">
              <div class="level-item">
                <button
                  class="button is-danger"
                  data-ide-handler="click:onSettingsReset"
                >
                  <span class="t" data-t="dialog.reset">Reset</span>
                </button>
                <button
                  class="button is-success"
                  data-ide-handler="click:onSettingsSave"
                >
                  <span class="icon">
                    <span class="fas fa-save"></span>
                  </span>
                  <span class="t" data-t="dialog.save">Save</span>
                </button>
                <button class="button" data-ide-handler="click:onSettingsClose">
                  <span class="t" data-t="dialog.close">Close</span>
                </button>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>

    <!-- Save -->
    <div class="modal dialog" id="save-dialog">
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">
            <span class="icon">
              <span class="fas fa-save"></span>
            </span>
            <span class="t" data-t="[html]save.title"></span>
          </p>
          <button
            class="delete"
            aria-label="close"
            data-ide-handler="click:onSaveClose"
          ></button>
        </header>
        <section class="modal-card-body">
          <div class="field">
            <label
              class="label t"
              for="save_name"
              data-t="save.enter_name"
            ></label>
            <div class="control">
              <input
                name="save"
                type="text"
                id="save_name"
                class="input"
                required
              />
            </div>
          </div>
        </section>
        <footer class="modal-card-foot">
          <div class="level">
            <div class="level-right">
              <div class="level-item">
                <button
                  class="button is-success"
                  data-ide-handler="click:onSaveSumbit"
                >
                  <span class="icon">
                    <span class="fas fa-save"></span>
                  </span>
                  <span class="t" data-t="dialog.save"></span>
                </button>
                <button
                  class="button osm is-success"
                  data-ide-handler="click:onSaveOsmSumbit"
                >
                  <span class="icon">
                    <span class="fas fa-globe-americas"></span>
                  </span>
                  <span class="t" data-t="dialog.save-osm"></span>
                </button>
                <button
                  class="t button"
                  data-ide-handler="click:onSaveClose"
                  data-t="dialog.cancel"
                ></button>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>

    <!-- Load -->
    <div class="modal dialog" id="load-dialog">
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">
            <span class="icon">
              <span class="fas fa-folder-open"></span>
            </span>
            <span class="t" data-t="[html]load.title"></span>
          </p>
          <button
            class="delete"
            aria-label="close"
            data-ide-handler="click:onLoadClose"
          ></button>
        </header>
        <section class="modal-card-body">
          <div class="box">
            <h4 class="t subtitle" data-t="load.saved_queries-local"></h4>
            <div>
              <ul class="plain saved_query"></ul>
            </div>
          </div>
          <div class="box osm">
            <h4 class="t subtitle" data-t="load.saved_queries-osm"></h4>
            <div class="osm-queries">
              <ul class="plain osm"></ul>
            </div>
          </div>
          <div class="box">
            <h4 class="t subtitle" data-t="load.examples"></h4>
            <div>
              <ul class="plain example"></ul>
            </div>
          </div>
        </section>
        <footer class="modal-card-foot">
          <div class="level">
            <div class="level-right">
              <div class="level-item">
                <button class="button" data-ide-handler="click:onLoadClose">
                  <span class="t" data-t="dialog.cancel">Cancel</span>
                </button>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>

    <!-- Export-->
    <div class="modal dialog" id="export-dialog">
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">
            <span class="icon">
              <span class="fas fa-external-link-alt"></span>
            </span>
            <span class="t" data-t="[html]export.title"></span>
          </p>
          <button
            class="delete"
            aria-label="close"
            data-ide-handler="click:onExportClose"
          ></button>
        </header>
        <section class="modal-card-body">
          <div class="box">
            <h4 class="t subtitle" data-t="export.section.data"></h4>
            <p
              class="t field is-horizontal"
              data-t="[html]export.generic_download_copy"
              id="export-geoJSON"
            ></p>
            <p
              class="t field is-horizontal"
              data-t="[html]export.generic_download_copy"
              id="export-GPX"
            ></p>
            <p
              class="t field is-horizontal"
              data-t="[html]export.generic_download_copy"
              id="export-KML"
            ></p>
            <p
              class="t field is-horizontal"
              data-t="[html]export.generic_download_copy"
              id="export-raw"
            ></p>
            <p class="t" data-t="[html]export.raw_interpreter"></p>
            <p>
              <span class="t" data-t="export.editors"></span>
              <a id="export-editors-josm" href="">JOSM</a>,
              <a
                id="export-editors-level0"
                href=""
                target="_blank"
                class="external"
              >
                Level0
              </a>
            </p>
            <!--
        <p class="t" data-t="[html]export.save_geoJSON_gist"></p>
        -->
          </div>
          <div class="box">
            <h4 class="t subtitle" data-t="export.section.map"></h4>
            <p class="t" data-t="[html]export.as_png"></p>
            <p class="t" data-t="[html]export.as_interactive_map"></p>
            <p>
              <span class="t" data-t="[html]export.current_map_view"></span>
              <small
                >(<span class="t" data-t="export.map_view_expl"></span>)</small
              >
            </p>
          </div>
          <div class="box">
            <h4 class="t subtitle" data-t="export.section.query"></h4>
            <div>
              <p
                class="t field is-horizontal"
                data-t="[html]export.generic_download_copy"
                id="export-text"
              ></p>
              <p
                class="t field is-horizontal"
                data-t="[html]export.generic_download_copy"
                id="export-text_raw"
              ></p>
              <p
                class="t field is-horizontal"
                data-t="[html]export.generic_download_copy"
                id="export-text_wiki"
              ></p>
              <p
                class="t field is-horizontal"
                data-t="[html]export.generic_download_copy"
                id="export-text_umap"
              ></p>
              <p class="t" data-t="[html]export.to_xml"></p>
              <p class="t" data-t="[html]export.to_ql"></p>
            </div>
          </div>
        </section>
        <footer class="modal-card-foot">
          <div class="level">
            <div class="level-right">
              <div class="level-item">
                <button class="button" data-ide-handler="click:onExportClose">
                  <span class="t" data-t="dialog.cancel">Cancel</span>
                </button>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>

    <!-- Download -->
    <div class="modal dialog" id="export-download-dialog">
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p
            class="t modal-card-title"
            data-t="[html]export.download-error"
          ></p>
          <button
            class="delete"
            aria-label="close"
            data-ide-handler="click:onExportDownloadClose"
          ></button>
        </header>
        <section class="modal-card-body">
          <p class="message notification is-success is-light"></p>
        </section>
        <footer class="modal-card-foot">
          <div class="level">
            <div class="level-right">
              <div class="level-item">
                <button
                  class="button"
                  data-ide-handler="click:onExportDownloadClose"
                >
                  <span class="t" data-t="dialog.close">Close</span>
                </button>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>

    <!-- Export Clipboard success -->
    <div class="modal dialog" id="export-clipboard-success">
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p
            class="t modal-card-title"
            data-t="[html]export.copy_to_clipboard_success"
          ></p>
          <button
            class="delete"
            aria-label="close"
            data-ide-handler="click:onExportClipboardClose"
          ></button>
        </header>
        <section class="modal-card-body">
          <p class="message notification is-success is-light"></p>
        </section>
        <footer class="modal-card-foot">
          <div class="level">
            <div class="level-right">
              <div class="level-item">
                <button
                  class="button"
                  data-ide-handler="click:onExportClipboardClose"
                >
                  <span class="t" data-t="dialog.close">Close</span>
                </button>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>

    <!-- Share -->
    <div class="modal dialog" id="share-dialog">
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">
            <span class="icon">
              <span class="fas fa-share-alt"></span>
            </span>
            <span class="t" data-t="[html]share.title"></span>
          </p>
          <button
            class="delete"
            aria-label="close"
            data-ide-handler="click:onShareClose"
          ></button>
        </header>
        <section class="modal-card-body">
          <div class="box">
            <h3 class="t subtitle" data-t="share.header"></h3>
            <p>
              <label
                for="share_link_textarea"
                class="t"
                data-t="[html]share.copy_this_link"
              ></label>
            </p>
            <div class="control">
              <input
                class="input"
                type="text"
                readonly
                id="share_link_textarea"
              />
            </div>
            <span id="share_link_warning"></span>
          </div>
          <div class="box">
            <h3 class="t subtitle" data-t="share.options"></h3>
            <div class="field">
              <div class="control">
                <label class="checkbox">
                  <input
                    type="checkbox"
                    name="include_coords"
                    data-ide-handler="change:updateShareLink"
                  />
                  <span class="t" data-t="share.incl_map_state"></span>
                </label>
              </div>
            </div>
            <div class="field">
              <div class="control">
                <label class="checkbox">
                  <input
                    type="checkbox"
                    name="run_immediately"
                    data-ide-handler="change:updateShareLink"
                  />
                  <span class="t" data-t="share.run_immediately"></span>
                </label>
              </div>
            </div>
          </div>
        </section>
        <footer class="modal-card-foot">
          <div class="level">
            <div class="level-right">
              <div class="level-item">
                <button class="button" data-ide-handler="click:onShareClose">
                  <span class="t" data-t="dialog.cancel">Cancel</span>
                </button>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>

    <!--free form search / wizard-->
    <div class="modal" id="ffs-dialog">
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">
            <span class="icon">
              <span class="fas fa-magic"></span>
            </span>
            <span class="t" data-t="[html]ffs.title"></span>
          </p>
          <button
            class="delete"
            aria-label="close"
            data-ide-handler="click:onFfsClose"
          ></button>
        </header>
        <section class="modal-card-body">
          <div class="content">
            <span class="t" data-t="[html]ffs.expl"></span>
            <ul>
              <li>Drinking Water</li>
              <li>highway=* and type:way</li>
              <li>tourism=museum in Vienna</li>
            </ul>
          </div>
          <div class="field">
            <div class="control has-icons-left">
              <input
                type="search"
                autofocus="autofocus"
                placeholder=""
                value=""
                id="ffs-input"
                class="t input is-rounded"
                data-t="[placeholder]ffs.placeholder"
                required
              />
              <span class="icon is-left">
                <i class="fas fa-search"></i>
              </span>
            </div>
          </div>
          <div class="loading">
            <progress class="progress is-small is-dark" max="100"></progress>
          </div>
          <div
            id="ffs-dialog-parse-error"
            style="display: none"
            class="notification is-danger is-light"
          >
            <span class="t warning severe" data-t="ffs.parse_error"></span
            ><br />
            <small>
              <span class="t" data-t="[html]ffs.parse_error_expl"></span>
            </small>
          </div>
          <div
            id="ffs-dialog-typo"
            style="display: none"
            class="notification is-danger is-light"
          >
            <span class="t warning" data-t="ffs.typo"></span>&nbsp;
            <a href="" id="ffs-dialog-typo-correction"></a>
          </div>
        </section>
        <footer class="modal-card-foot">
          <div class="level">
            <div class="level-right">
              <div class="level-item">
                <button
                  class="button is-success"
                  data-ide-handler="click:onFfsRun"
                >
                  <span class="icon">
                    <span class="fas fa-play"></span>
                  </span>
                  <span class="t" data-t="dialog.wizard_run"></span>
                </button>
                <button
                  class="button is-success"
                  data-ide-handler="click:onFfsBuild"
                >
                  <span class="icon">
                    <span class="fas fa-hammer"></span>
                  </span>
                  <span class="t" data-t="dialog.wizard_build"></span>
                </button>
                <button class="button" data-ide-handler="click:onFfsClose">
                  <span class="t" data-t="dialog.cancel">Cancel</span>
                </button>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>

    <!-- Unsupported browser warning -->
    <div class="modal" id="warning-unsupported-browser">
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="t modal-card-title" data-t="[html]warning.browser.title">
            Your browser is not supported :(
          </p>
        </header>
        <section class="modal-card-body">
          <p class="t" data-t="[html]warning.browser.expl.1">
            The browser you are currently using, is (most likely) not capable of
            running (significant parts of) this Application.
            <small>
              It must support
              <a href="http://en.wikipedia.org/wiki/Web_storage#localStorage">
                Web Storage API
              </a>

              and
              <a
                href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing"
              >
                cross origin resource sharing (CORS)
              </a>
              .
            </small>
          </p>
          <p class="t" data-t="[html]warning.browser.expl.2">
            Note that you may have to enable cookies and/or "local Data" for
            this site on some browsers (such as Firefox and Chrome).
          </p>
          <p class="t" data-t="[html]warning.browser.expl.3">
            Please upgrade to a more up-to-date version of your browser or
            switch to a more capable one! Recent versions of
            <a href="http://www.opera.com">Opera</a>,
            <a href="http://www.google.com/intl/de/chrome/browser/">Chrome</a>
            and <a href="http://www.mozilla.org/de/firefox/">Firefox</a> have
            been tested to work. Alternatively, you can still use the
            <a href="http://overpass-api.de/query_form.html">
              Overpass_API query form
            </a>
            .
          </p>
        </section>
        <footer class="modal-card-foot"></footer>
      </div>
    </div>

    <noscript>
      <div
        class="notification is-danger"
        style="
          display: block;
          position: relative;
          width: 30%;
          max-width: 800px;
          min-width: 300px;
          margin: auto;
          z-index: 9999;
          margin-top: 2em;
          padding: 1em 1.5em 1em 1.5em;
          background-color: #f14668;
        "
      >
        Please enable JavaScript to use overpass turbo.
      </div>
    </noscript>
  </body>
</html>
